<template>
	<view>
		<view class="top">
			<u-subsection :list="list" mode="button" :current="current1" @change="change1" activeColor="#FFF"
				inactiveColor="#FFF" hbgColor='#fc6758' bgColor='transparent'></u-subsection>
		</view>

		<view class="thread">
			<view class="nd">
				<view class="head2nd" style="" v-if="userslist[1] != null">
					<image v-if="userslist[1] != null" class="heads2" :src='userslist[1].userImageUrl'></image>
				</view>

				<view class="names" v-if="userslist[1] != null">
					{{userslist[1].clubName |phone4}}
				</view>
				<view class="jifen" style="" v-if="userslist[1] != null">
					<text>{{userslist[1].clubIntegral}}</text>
					<text>牛果</text>
				</view>
			</view>
			<view class="st">
				<view class="head1st" style="" v-if="userslist[0] != null">
					<image class="heads1" v-if="userslist[0] != null" :src='userslist[0].userImageUrl'></image>
				</view>
				<view class="names" style="" v-if="userslist[0] != null">
					{{userslist[0].clubName |phone4}}
				</view>
				<view class="jifen" style="" v-if="userslist[0] != null">
					<text>{{userslist[0].clubIntegral}}</text>
					<text>牛果</text>
				</view>
			</view>
			<view class="rd">
				<view class="head3rd" style="" v-if="userslist[2] != null">
					<image class="heads3" v-if="userslist[2] != null" style="" :src='userslist[2].userImageUrl'></image>
				</view>
				<view class="names" style="" v-if="userslist[2] != null">
					{{userslist[2].clubName |phone4}}
				</view>
				<view class="jifen" style="" v-if="userslist[2] != null">
					<text>{{userslist[2].clubIntegral}}</text>
					<text>牛果</text>
				</view>
			</view>
		</view>

		<view class="lists">
			<!-- 	<view  @click="open()" class="btnsf" style="" v-if="shows">
					<view>▲</view>
				</view>
				<view  @click="open()" class="btnsf" v-else>
					<view>▼</view>
				</view> -->

			<!-- 折叠 -->
			<view v-if="shows">
				<view class="users" v-for="(index,item) in userslist" v-if="item >= 3" v-show="shows == 0"
					@click="open(1)">
					<text class="num" style="">{{item+1}}</text>
					<view class="usershead">
						<image v-if="index != null" :src='index.userImageUrl' mode=""
							style="width: 70upx;height: 70upx;border-radius: 999rem;"></image>
					</view>

					<text class="usersname" style="" v-if="index != null">{{index.clubName |phone4}}</text>
					<text class="usersintegral" style="" v-if="index != null">{{index.clubIntegral}}</text>
				</view>
			</view>

			<!-- 当前牛粉排名 -->
			<view class="users" v-for="(index,item) in userslistmain" style="margin-top: 40upx;">
				<text class="num" style="">{{index.ranking}}</text>
				<view class="usershead">
					<image :src='index.userImageUrl' mode="" style="width: 70upx;height: 70upx;border-radius: 999rem;">
					</image>
				</view>

				<text class="usersname" style="">{{index.clubName |phone4}}</text>
				<text class="usersintegral" style="">{{index.clubIntegral}}</text>
			</view>
		</view>

		<view class="texts">
			<view style="text-align: center;font-size: 40upx;margin: 40upx 0;width: 100%;">邀请新人福利多多</view>
			<rich-text :nodes="maintext"></rich-text>
			<!-- <u-parse :content="maintext"></u-parse> -->
			<view style="text-align: center;width: 100%;margin: 0 auto;left: 0;right: 0;" @longpress="code(urls)">
				<!-- <image style="width: 240upx;height: 240upx;" :src='urls' mode=""></image> -->
			</view>

		</view>


	</view>
</template>

<script>
	import {
		clublist
	} from '@/api/invite'
	export default {
		data() {
			return {
			maintext: `<span class="infoBox1">
			一、	注册牛粉权益：
			<br />
			<br />
			1.	凡是儒雅牛注册的实名认证用户，即成为儒雅牛的牛粉，牛粉在淘宝、京东等购物平台自购省钱约3%、分享赚钱约3%，省钱+赚钱，喊朋友一起来嗨！
			<br />
			2.	美团、饿了吗、电影、加油、充值缴费等享受优惠价格，羊毛薅起来！
			<br />
			3.	信用卡精准账单日提醒，有效降低负债率，提高综合信用评分，额度蹭蹭蹭！
			<br />
			<br />
			二、活动奖励：
			<br />
			<br />
			邀请新人注册，每次获得10牛果；
			<br />
			被邀请人的手机号必须未注册过儒雅牛账号；
			<br />
			<br />
			被邀请人第一次商城下单，获得20牛果；
			<br />
			被邀请人需在商城第一次下单且完成订单；（仅限首次）
			<br />
			<br />
			新人购买VIP，其邀请者每次获得50牛果；
			<br />
			邀请新人注册后购买VIP；
			<br />
			<br />
			每日签到，每次获得1牛果；
			<br />
			在儒雅牛签到，每日仅限1次；
			<br />
			<br />
			每日点赞，每次获得1牛果；
			<br />
			在儒雅牛小视频社区点赞，每日限3次；
			<br />
			<br />
			每日评论，每次获得2牛果；
			<br />
			在儒雅牛小视频社区评论，每日限3次；
			<br />
			<br />
			每日发布视频，首次获得5牛果，后每次1牛果，每日共三次；
			<br />
			每日在儒雅牛圈子发布自己的小视频；
			<br />
			<br />
			每日做任务，每个任务单独计算规则，每次获得5牛果； 
			<br />
			每日完成儒雅牛——我的——任务管理中的指定任务，每日每个任务仅限一次；
			<br />
			<br />
			1000牛果=1牛角（仅限VIP）
			<br />
			1000牛果=10元代金券（用于牛粉商城购物）
			<br />
			当月个人牛果排名前十，联系客服获得平台额外奖励。
			<br />
			<br />
			三、声明<br />
			<br />
			活动期间如牛粉使用不正当手段获取奖励，儒雅牛有权利在事先不通知牛粉的情况下取消对其的奖励或者禁用该牛粉账号；牛粉参与本活动视为牛粉同意本活动规则；
			<br />
			如有疑问请联系儒雅牛客服。
			<br />
			<br />
          </span>	`,
				shows: true,
				current1: 0,
				list: ['日榜', '月榜', '总榜'],
				userslist: [],
				userslistmain: [],
				urls: '../../static/tabsIcon/ma.jpg'
			}
		},
		created() {
			this.change1(0);
		},
		filters: {
			phone4(value) {
				let phones = ''
				if(Number(value)){
					phones = value.substring(0, 3) + "****" + value.substring(7);
				}else{
					phones = value;
				}
				return phones;
			}
		},
		// onShow() {
		// 	this.change1(0);
		// 	this.userslistmain=[];
		// },
		methods: {
			open() {

				if (this.shows == true) {
					this.shows = false;
				} else {
					this.shows = true;
				}
			},
			// 保存图片
			code(url) {
				uni.downloadFile({
					url,
					success: (res) => {
						console.log(res.tempFilePath)
						// 获取到图片本地地址后再保存图片到相册(因为此方法不支持远程地址)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功！"
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
					}
				})
			},
			change1(index) {
				clublist(index).then(res => {
					if (res.success == 1) {
						if (res.data.ranking.length != 0) {
							this.userslist = res.data.ranking;
						}
						this.userslistmain = [];
						if (res.data.oneselfClub.id != null) {
							this.userslistmain.push(res.data.oneselfClub)
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				})
				// console.log(index)
				this.current1 = index
			},
		}
	}
</script>
<style>

</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	page {
		background-color: rgb(229, 231, 233);
	}

	.top {

		.u-subsection__item__text {
			.u-subsection__item__text {
				z-index: 10;
			}
		}

	}

	.thread {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		height: 400upx;
		width: 100%;

		.st {
			margin-top: 20upx;
			// margin-right: 5%;
			// margin-left: 5%;
			flex-grow: 1;
			height: 350upx;
			width: 30%;

			.head1st {
				height: 320upx;
				width: 250upx;
				margin-left: 0upx;
				background-image: url(../../static/tabsIcon/1st.png);
				background-size: 100%;
				background-repeat: no-repeat;
				overflow: hidden;

				.heads1 {
					margin-top: 70upx;
					width: 250upx;
					height: 250upx;
					border-radius: 999rem;
				}
			}
		}

		.nd {
			margin-top: 140upx;
			flex-grow: 1;
			height: 220upx;
			width: 30%;

			.head2nd {
				height: 200upx;
				width: 150upx;
				margin-left: 60upx;
				background-image: url(../../static/tabsIcon/2nd.png);
				background-size: 100%;
				background-repeat: no-repeat;
				overflow: hidden;

				.heads2 {
					margin-top: 50upx;
					width: 150upx;
					height: 150upx;
					border-radius: 999rem;
				}
			}
		}

		.rd {
			margin-top: 140upx;
			flex-grow: 1;
			height: 220upx;
			width: 30%;

			.head3rd {
				height: 200upx;
				width: 150upx;
				margin-left: 60upx;
				background-image: url(../../static/tabsIcon/3rd2.png);
				background-size: 65% 40%;
				background-position: 50% 0%;
				background-repeat: no-repeat;
				overflow: hidden;

				.heads3 {
					margin-top: 50upx;
					width: 150upx;
					height: 150upx;
					border-radius: 999rem;
				}
			}
		}
	}

	.heads {
		left: 50%;
		margin-left: -50upx;
		width: 100upx;
		height: 100upx;
		border-radius: 999rem;
	}

	.names {
		margin-top: 20upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
	}

	.jifen {
		text-align: center;
		font-size: 24upx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		letter-spacing: 5upx;
		opacity: 1;
	}

	.lists {
		width: 90%;
		margin: 40upx auto 0 auto;
		overflow: hidden;
		color: #000000;
		border-radius: 25upx;
		// background-image: url(../../static/tabsIcon/clubbottom.jpg);
		// background-color: transparent;
		background-color: #FFFFFF;
		// background-color: rgba(254, 140, 128, 1);
	}

	.users {
		position: relative;
		margin-top: 20upx;
		height: 80upx;
		z-index: 10;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;

		.num {
			width: 10%;
			color: #000000;
			flex-grow: 1;
			text-align: center;
		}

		.usershead {
			height: 40upx;
			width: 40upx;
			flex-grow: 1;
		}

		.usersname {
			color: #000000;
			width: 40%;
			flex-grow: 2;
			text-align: center;
			border-bottom: 1upx solid #000000;
			overflow: hidden;
			/*超出部分隐藏*/
			white-space: nowrap;
			/*不换行*/
			text-overflow: ellipsis;
			line-height: 60upx;
			font-size: 30upx;
		}

		.usersintegral {
			color: #000000;
			flex-grow: 1;
			width: 16%;
			text-align: left;
			border-bottom: 1upx solid #000000;
			line-height: 60upx;
			font-size: 30upx;
			overflow: hidden;
			/*超出部分隐藏*/
			white-space: nowrap;
			/*不换行*/
			text-overflow: ellipsis;
		}
	}

	.texts {
		position: relative;
		width: 100%;
		color: #000000;
		background-color: #fff;
		border-radius: 25upx;
		font-size: 30upx;
		width: 90%;
		left: 0;
		right: 0;
		margin: 40upx auto;
		min-height: 1100upx;
		padding: 10upx 40upx 0 40upx;
	}

	.btnsf {
		width: 100%;
		color: #000000;
		display: flex;
		justify-content: flex-end;

		view {
			margin-right: 80upx;
		}
	}

	/deep/ .u-subsection--button {
		width: 90% !important;
		margin: 0 auto !important;

		/deep/ .u-subsection--button bar {
			width: 100upx !important;
		}
	}
</style>
